/*
*@param {color} $borderColor
*@param {string} $borderStyle
*@param {list ----top-right-bottom-right} $borderDirection
*@param {list ----top-right-bottom-right} $borderRadius
*
*eg.@include border1px(#ccc, all, solid, 10rem);
*eg.@include border1px(#ccc, top left right, solid, 10rem);
*eg.@include border1px(#ccc, top left right, solid, 10rem 20rem);
*eg.@include border1px(#ccc, top left right, solid, 10rem 20rem 30rem,5rem);
*/

@function strip-units($number) {
    @return $number / ($number * 0 + 1);
}

@mixin border-1px($borderColor:#000, $borderSide:all, $borderStyle:solid, $borderRadius:0) {
    position: relative;
    &>* {
        position: relative;
        z-index: 2;
    }
    &::after {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        point-events: none;
        box-sizing: border-box;
        z-index: 1;
        @if $borderSide==all {
            border: 1px $borderStyle $borderColor;
        }
        @else {
            @each $sild in $borderSide {
                border-#{$sild}: 1px $borderStyle $borderColor;
            }
        }
        @if $borderRadius !=0 {
            border-radius: $borderRadius;
        }
        @else {
            border-radius: 0;
        }
        @at-root [data-dpr='1.5'] & {
            width: 150%;
            height: 150%;
            -webkit-transform: scale(.6666666666666);
            transform: scale(.6666666666666);
        }
        @at-root [data-dpr='2'] & {
            width: 200%;
            height: 200%;
            -webkit-transform: scale(.5);
            transform: scale(.5);
        }
        @at-root [data-dpr='3'] & {
            width: 300%;
            height: 300%;
            -webkit-transform: scale(.333333333333);
            transform: scale(.333333333333);
        }
    }
}